<template>
  <div class="sign">
    <div class="canvas-btns">
      <div @click="resetCanvas">
        <van-button block type="warning" native-type="submit">重绘</van-button>
      </div>

      <div @click="finishCanvas" style="margin-left: 20px">
        <van-button block type="info" native-type="submit">确认</van-button>
      </div>

      <!-- <van-button type="primary" class="btn" @click="getImgUrl"
        >提交印章</van-button
      > -->
    </div>
    <canvas id="canvas"></canvas>
    <slot></slot>
  </div>
</template>

<script>
import SignaturePad from "signature_pad";

export default {
  name: "signature",
  data() {
    return {
      canvas: null,
      signaturePad: null,
      config: {
        minWidth: 6,
        maxWidth: 2,
        penColor: "#000",
      },
      canvasUrl: "",
    };
  },
  mounted() {
    this.init();
  },
  methods: {
    init() {
      this.canvas = document.querySelector("#canvas");
      this.signaturePad = new SignaturePad(this.canvas, this.config);
      // this.canvas.height = document.body.clientHeight / 3;
      // this.canvas.width = document.body.clientWidth - 30;
      window.addEventListener("resize", this.resizeCanvas);
      this.resizeCanvas();

      // 读取数据，在canvas上显示
      // this.signaturePad.fromDataURL(base64);
    },
    // 清空
    resetCanvas() {
      this.signaturePad.clear();
    },
    // 转换为图片 默认为base64 png
    finishCanvas() {
      this.canvasUrl = this.signaturePad.toDataURL();
      this.$emit("handleSign", this.canvasUrl);
      // console.log(this.signaturePad.toDataURL());
    },

    resizeCanvas() {
      // let radio= Math.min(window.devicePixelRatio||1,1);
      // this.canvas.width = this.canvas.offsetWidth*radio;
      // this.canvas.height = this.canvas.offsetHeight*radio;
      this.canvas.height = document.body.clientHeight;
      this.canvas.width = document.body.clientWidth;
      // if (document.body.clientHeight < document.body.clientWidth) {
      //   this.canvas.height = document.body.clientHeight / 2;
      //   this.canvas.width = document.body.clientWidth - 130;
      // } else {
      //   this.canvas.height = document.body.clientHeight / 3;
      //   this.canvas.width = document.body.clientWidth - 30;
      // }

      this.signaturePad.clear(); // otherwise isEmpty() might return incorrect value
    },
    getImgUrl() {
      console.log("this.canvasUrl:", this.canvasUrl);
      this.$emit("getImgUrl", this.canvasUrl);
    },
  },
};
</script>

<style lang="scss" scoped>
.sign {
  padding-bottom: 40px;
  position: fixed;
  height: 100vh;
  width: 100vw;
  background-color: white;
}

.canvas-btns {
  position: absolute;
  z-index: 99;
  // width: 90%;
  padding: 10px 0;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: rotate(90deg);
  left: 0;
}

.canvas-btns > div:first-child {
  color: red;
}

.canvas-btns > div:last-child {
  color: green;
}

.tip {
  font-size: 14px;
  color: #999;
}

.canvas-box {
  width: 100%;
  // margin: 0 auto;
}

#canvas {
  border: 1px dashed #d9d9d9;
  margin: 0 auto;
  position: absolute;
  // position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
}

.btn {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  margin: 30px auto;
}
</style>
